import React, {Component} from 'react';
import  { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { changeTab, getFilterData,changeOpenKey, changeIsShow, selectTab,closePanel, getFilterResult } from '../actions/headerAction';
import './FilterHeader.scss';
import { TABKEY } from '../config/index';
import {getDataByFilter} from "../actions/contentListAction";

function mapStateToProps(state) {
    return {
        tabs: state.handleTabReducer.tabs,
        activeKey: state.handleTabReducer.activeKey,
        filterData: state.handleTabReducer.filterData,
        openPanelKey: state.handleTabReducer.openPanelKey,
        isShowPanel: state.handleTabReducer.isShowPanel
    }
}

function mapDispatchToProps(dispatch) {
    return {
        changeTabAction: bindActionCreators(changeTab, dispatch),
        getFilterDataAction: bindActionCreators(getFilterData, dispatch),
        changeOpenKeyAction: bindActionCreators(changeOpenKey, dispatch),
        changeIsShowAction: bindActionCreators(changeIsShow, dispatch),
        selectTabAction: bindActionCreators(selectTab, dispatch),
        closePanelAction: bindActionCreators(closePanel, dispatch),
        getFilterResultAction: bindActionCreators(getFilterResult, dispatch),
        getDataByFilterAction : bindActionCreators(getDataByFilter, dispatch)
    }
}
class FilterHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.fetchData();
    }

    fetchData() {
        this.props.getFilterDataAction();
    }
    /**
     * 切换tab
     */
    handleTab(key) {
        this.props.selectTabAction({
            activeKey: key,
            openPanelKey: key,
            isShowPanel: true
        })
    }

    /**
     * 渲染tab
     */
    renderTab() {
        let tabs = this.props.tabs;
        let activeKey = this.props.activeKey;
        let arr = [];
        for(var key in tabs) {
            let item = tabs[key];
            let className = item.key + ' item';
            if(item.key === activeKey) {
                className += ' current';
            }

            arr.push(
                <div className={className} key={item.key} onClick={() => this.handleTab(item.key)}>
                    {item.text}
                </div>
            )
        }
        return arr;
    }

    /**
     * 渲染筛选用数据
     */
    renderContent() {
        let tabs = this.props.tabs;
        let openPanelKey = this.props.openPanelKey;
        let array = [];

        for(var key in tabs) {
            let item = tabs[key];
            let cls = item.key + '-panel';
            if (item.key === this.props.activeKey) {
                cls += ' current';
            }
            if (item.key === TABKEY.cate && item.key === openPanelKey) {
                array.push(
                    <ul key={item.key} className={cls}>
                        {this.renderCateContent()}
                    </ul>
                );
            } else if (item.key === TABKEY.type && item.key === openPanelKey) {
                array.push(
                    <ul key={item.key} className={cls}>
                        {this.renderTypeContent()}
                    </ul>
                );
            } else if (item.key === TABKEY.filter && item.key === openPanelKey) {
                array.push(
                    <ul key={item.key} className={cls}>
                        {this.renderFilterContent()}
                    </ul>
                );
            }
        }

        return array;
    }

    /**
     * 渲染全部分类的外部条目
     */
    renderCateContent () {
        let filterData = this.props.filterData;
        let items = filterData.category_filter_list || []
        return items.map((item, index)=>{
            return (
                <li key={index} className="cate-item">
                    <p className="item-title">{item.name}<span className="item-count">{item.quantity}</span></p>
                    <div className="item-content clearfix">
                        {this.renderCateInnerContent(item, items)}
                    </div>
                </li>
            )
        });
    }

    /**
     * 渲染全部分类的内部条目
     */
    renderCateInnerContent (items, listData) {
        return items.sub_category_list.map((item, index)=>{
            let cls = item.active ? 'cate-box-inner active' : 'cate-box-inner';
            return (
                <div key={index} className="cate-box" onClick={() => this.changeDoFilter(item, TABKEY.cate, listData)}>
                    <div className={cls}>
                        {item.name}({item.quantity})
                    </div>
                </div>
            )
        })
    }

    /**
     * 渲染综合排序的外部条目
     */
    renderTypeContent () {
        let typeList = this.props.filterData.sort_type_list || [];
        return typeList.map((item, index)=>{
            let cls = item.active ? "type-item active" : "type-item";

            return (
                <li key={index} className={cls} onClick={() => this.changeDoFilter(item, TABKEY.type, typeList)}>
                    {item.name}
                </li>
            );
        })
    }

    /**
     * 渲染筛选的外部条目
     */
    renderFilterContent () {
        let filterList = this.props.filterData.activity_filter_list || [];
        return filterList.map((item, index)=>{
            return (
                <li key={index} className="filter-item">
                    <p className="filter-title">{item.group_title}</p>
                    <div className="item-content clearfix">
                        {this.renderFilterInnerContent(item.items, filterList)}
                    </div>
                </li>
            );
        })
    }

    /**
     * 渲染筛选的内部条目
     */
    renderFilterInnerContent(items, list) {
        return items.map((item, index)=>{
            let cls = item.icon ? 'cate-box-inner has-icon' : 'cate-box-inner';
            if (item.active) {
                cls += ' active';
            }
            return (
                <div  key={index} className="cate-box" onClick={() => this.changeDoFilter(item, TABKEY.filter, list)}>
                    <div className={cls}>
                        {item.icon ? <img src={item.icon}/> : null}{item.name}
                    </div>
                </div>
            )
        });
    }

    /**
     * 重置其他item的active为false
     */
    revertActive(key, dataList){
        if (key === TABKEY.cate) {
            for (let i = 0 ; i < dataList.length ; i++) {
                for (let j = 0 ; j < dataList[i].sub_category_list.length ;j++) {
                    dataList[i].sub_category_list[j].active = false;
                }
            }
        } else if (key === TABKEY.type) {
            for (let x = 0 ; x < dataList.length ; x++) {
                dataList[x].active = false;
            }
        } else {
            for (let k = 0 ; k < dataList.length ; k++) {
                for (let o = 0 ; o < dataList[k].items.length ;o++) {
                    dataList[k].items[o].active = false;
                }
            }
        }
    }
    // 获取并设置点击筛选项
    changeDoFilter (item, key, dataList) {
        // 首先需要重置我们的列表
        this.revertActive(key, dataList);
        item.active = true
        this.props.getFilterResultAction({
            key: key,
            item: item
        })
        this.props.getDataByFilterAction(true)
    }

    // 点击外侧关闭 panel
    closePanel = (e) => {
        let cls = e.target.className;
        let arr = cls.toString().split(' ');
        if(arr.indexOf('show') !== -1) {
            this.props.closePanelAction()
        }
    }


    render() {
        let cls = 'panel';
        if (this.props.isShowPanel) {
            cls += ' show';
        } else {
            cls = 'panel';
        }
        return (
          <div className='filter-header'>
            <div className="header-top">
                {this.renderTab()}
            </div>
            <div className={cls} onClick={this.closePanel}>
              <div className="panel-inner">
                  {this.renderContent()}
              </div>
            </div>
          </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FilterHeader)
